<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作日志</title>
    <script src="jquery-3.6.0.js"></script>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!--查询-->
<form class="layui-form" action="" id="search" lay-filter="searchLogFormFilter">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="userName"   placeholder="请输入姓名" autocomplete="off"
                   class="layui-input" >
        </div>
        <label class="layui-form-label">ip地址</label>
        <div class="layui-input-inline">
            <input type="text" name="ip"   placeholder="请输入ip" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-submit lay-filter="search">查询</button>
            <button type="reset" id="searchReset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<table id="log" lay-filter="log"></table>


<script>
    layui.use(['table','form'], function(){
        let table = layui.table;
        let form =layui.form;
        //第一个实例
        table.render({
            elem: '#log'
            ,url: '/log/selectAllPage' //数据接口
            ,page: true //开启分页
            ,cols: [
                [ //表头
                    {field: 'id', title: 'ID', width:60, sort: true, fixed: 'left'}
                    ,{field: 'loginName', title: '登录名', width:120}
                    ,{field: 'userName', title: '用户名', width:120}
                    ,{field: 'ip', title: 'ip地址', width:120}
                    ,{field: 'className', title: '类名', width: 400}
                    ,{field: 'methodName', title: '方法名', width: 200}
                    ,{field: 'params', title: '参数', width: 200}
                    ,{field: 'operationTime', title: '创建时间', width: 200}
                ]
            ]
        });
        //查询
        form.on('submit(search)', function (data) {
            table.reload('log', {
                where: {
                    userName: data.field.userName,
                    ip: data.field.ip,
                    page: 1,
                    limit: 10
                }
            });
            return false;
        });
        //重置按钮
        $(document).on('click', '#searchReset', function () {
            table.reload('log', {
                where: {
                    userName: null,
                    ip: null
                }
            })
        });

    });
</script>

</body>
</html>
